iT邦幫忙

2021 iThome 鐵人賽

DAY 21
0
Modern Web

從零開始打造網頁遊戲-造輪子你也辦的到!系列 第 21

Chapter4 - Canvas背景動畫(II)就如那輕薄的鴻毛,我心上小船載浮載沉

  • 分享至 

  • xImage
  •  

今天西子灣被斷網了,所以沒時間打太多字,請見諒,有看不懂的留言詢問哦!
https://ithelp.ithome.com.tw/upload/images/20210929/20135197T85SPNrqrN.png
https://jerry-the-potato.github.io/Chapter4-demo2/

Floating

有了前兩篇作為基礎後,我們可以思考不同類型的動畫,比如讓羽毛從畫面下方飛進來,往上飛到最高點後,往下掉,有一個函數正描述了這種狀態,請問是什麼函數呢?沒錯,就是sin函數,採用0~180度的範圍來作,因此這個公轉的角度範圍,被我們改成固定值:

let revolve1 = (dT / this.lifeTime) * Math.PI;
let A = Math.sin(revolve1);
let B = Math.cos(revolve1);

因為動畫時長對應半個圓的角度,因此要拿(dT / this.lifeTime) * Math.PI來得到當前的角度,當dT大於動畫時長,就是物件回歸原點,並消失之時

接著在的function animeObject建構式中,判斷若動畫名稱為Floating,使位置隨機放置在整個畫面高度0.95~1.05之間:

switch(animeName){
    case 'Falling':
        this.beginX = Math.random() * WIDTH;
        this.beginY = Math.random() * HEIGHT;
    break;
    case 'Floating':
        this.beginX = Math.random() * WIDTH;
        this.beginY = Math.random() * 0.1 * HEIGHT + 0.95 * HEIGHT;
    break;
}

y值向下為正

而完整的羽毛動畫和昨天的落葉動畫相去不遠,代碼如下:

animeObject.prototype.Floating = function(dT){
    let lT = this.lifeTime;
    let revolve1 = (dT / lT) * Math.PI;
    let A = Math.sin(revolve1);
    let B = Math.cos(revolve1);
    let x = this.scaleX * (this.period * WIDTH * 0 * B
                                       + WIDTH * 0 * (dT / lT));
    let y = -this.scaleY * (this.period * HEIGHT * 0.11 * A
                                        - HEIGHT * 0 * (dT / lT));
    this.pointX = this.beginX + x;
    this.pointY = this.beginY + y;
    const popSize = 0.2;
    let distanceT = (Math.abs(dT - lT*0.35) + Math.abs(dT - lT*0.65)) / lT;
    this.sizeNow = WIDTH * this.size * (popSize + (1 - distanceT));
}

不過仍有所不同,相比昨天的落葉,我們可以注意到羽毛在(x, y)處,同樣有公轉的簡諧運動加上線性運動,除了我們上述提到的sin函數以外,其他參數都設置為零,把0改成其他數字,一樣可以製造出各種豐富的效果,這個就留給大家去探索了,如果大家每次都有點進demo,應該知道我都有額外作一些設置方便大家體驗各種動畫,每次都多花不少時間,那些代碼也不見得之後用的到,這次就大家自己拿開發者工具玩玩吧!

還是給大家一點方向吧

只要把(0,   0,   0.11, 0  )...
  改成(0.5, 0.5, 0.11, 0  )就會有波浪不斷往左滾動的效果
  改成(0,   0,   0.11, 0.5)可以使羽毛在最高點飄得更久,緩慢落下到一半就消失

再來聊聊這四種動畫模式

如果不知道period是什麼,記得先去看昨天的文章!

規律

雖然我們有讓Y座標隨機分布,不過不妨礙我們觀察,基本還是可以很清楚的看到羽毛物件們有個最高點,動畫軌跡也很好預測,彷彿有一條線在最上方攔住他們一樣。

多樣

多樣提供了一個很豐富的變化,使得羽毛物件們既有所不同,又保留的先來後到的順序一致性,只能說這是我最享受的模式

混亂

混亂則有著一股神奇的魔力,可以發現每個羽毛物件的速度都不一樣,這也使得路徑琳朗滿目,每個都有自己的靈魂

自由

昨天關於自由已經有哲學演說了,這邊本來還想做個畫面旋轉XD,不過考慮到畫面不是設定成正方形,後來寫一寫就放掉了,實際上能自由控制羽毛往上飛的幅度已經很快樂了,就按原本的樣子呈現嚕。


上一篇
Chapter4 - Canvas背景動畫(I)讓落葉隨風飄落、自然搖擺
下一篇
Chapter4 - Canvas背景動畫(III)風中的花朵 今天再加碼讓動畫更加自然的方法
系列文
從零開始打造網頁遊戲-造輪子你也辦的到!31
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言